<template>
  <div id="app" :style="{minHeight:height}">
    <transition :name="transition" @enter="enter" @after-enter="afterEnter">
      <!-- <keep-alive> -->
        <router-view :transitionDone="transitionDone"></router-view>
      <!-- </keep-alive> -->
    </transition>
    <myFooter></myFooter>
  </div>
</template>

<script>
import myFooter from './components/Footer'
export default {
  name: 'app',
  data(){
      return{
        transition:'',
        height:'',
        transitionDone:false
      }
  },
  mounted(){
      this.height = window.innerHeight + 'px';
      // console.log(this.transitionDone)
  },
  methods:{
    enter(el,cb){
      console.log('enter?')
      this.transitionDone = true;
      console.log(this.transitionDone)
      cb();
    },
    afterEnter(){
      // console.log('afterEnter')
    }
  },
  components:{myFooter},
  watch:{
      '$route'(to,from){
          if(to.name === 'ask') this.transition = 'slideInBottom';
          else if(from.name === 'ask') this.transition = 'slideOutBottom';
          else this.transition = to.meta.tier > from.meta.tier? 'slideInRight' : 'slideInLeft';
          setTimeout(()=>{
            window.scrollTo(0,0)
          },300)
      }
  }
}
</script>

<style>
/*html,body,#app {
  min-height: 100%;
}*/
body{
  overflow-x: hidden;
}
#app {
  font-family: '微软雅黑', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  overflow-x: hidden;
  width: 100%;
  min-height: 100%;
}
/*slideInRight: 高tier从屏幕右侧进入屏幕，低tier从屏幕往屏幕左侧移动至消失
slideInLeft: 低tier从屏幕左侧进入屏幕，高tier从屏幕往屏幕右侧移动至消失
slideInBottom: 低tier不动，高tier从屏幕底部进入屏幕*/
/* 高tier进入时的状态，从右往左移动 */
.slideInRight-enter,
/* 低tier离开时的状态，向右移动至消失 */
.slideInLeft-leave-active {
  transform: translateX(100%);
}
/* 低tier离开时的状态，向左移动至消失 */
.slideInRight-leave-active,
/* 进入时的状态，从左往右移动 */
.slideInLeft-enter{
  transform: translateX(-100%);
}
.slideInBottom-enter,
.slideOutBottom-leave-active{
  transform: translateY(100%);
}
.slideInBottom-leave-active{

}

.page-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: all .2s;
  background: #f2f2f2;
  min-height: 100%;
}
.sub-page-wrapper{
  position: absolute;
  top: 1.3rem;
  left: 0;
  width: 100%;
  transition: all .2s;
  background: #f2f2f2;
}
</style>
